<template>
  <div id="myLineId1"  class="lineContainer1"></div>
</template>

<script>
var data0 = [{
    name: '12',
    value:90,
    
}, {
    name: '',
    value: 270
}];
var data1 = [{
    name: '12',
    value:90
}, {
    name: '',
    value: 270
}];
var data2 = [{
    name: '14',
    value:90
}, {
    name: '',
    value: 270
}];
import echarts from 'echarts'
export default {
 data(){
      return{
          echart:null
      }
  },
  mounted(){
      this.initEchart()  //首屏渲染
  },
  methods:{
     initEchart(){
                  this.$nextTick(()=>{
                        this.echart = echarts.init(document.getElementById('myLineId1'))
                        this.echart.setOption(this.option())
                    })
      },
    option(){
   let option = {
    title: [{
        text: '待办事项',
        left:'10%',
        fontSize:40,
        top:'24px'
    }, {
        subtext: '待付款订单',
        left: '16.67%',
        top: '63%',
         subtextStyle:{
                 color:"#333",
                 fontFamily:'MicroSoft YaHei',
                 fontWeight:'bold',
                 fontSize:'18px'
        },
        
        textAlign: 'center',
    }, {
        subtext: '待确认订单',
        left: '50%',
        top: '63%',
        textStyle:{fontWeight:'bold',
                 fontSize:'30px'},
         subtextStyle:{
                 color:"#333",
                 fontFamily:'MicroSoft YaHei',
                 fontWeight:'bold',
                 fontSize:'18px'
        },
        textAlign: 'center'
    }, {
        subtext: '待回复客户',
        left: '83.33%',
        top: '63%',
        subtextStyle:{
                 color:"#333",
                 fontFamily:'MicroSoft YaHei',
                 fontWeight:'bold',
                 fontSize:'18px'
        },
        textAlign: 'center'
    }],
    series: [
             {
        type: 'pie',
        radius: ['25%','40%'],
        center: ['50%', '50%'],
        data: data0,
        label: {
                show: true,
                position: 'center'
            },
        left: 0,
        right: '66.6667%',
        top: '-44px',
        bottom: 0,
          emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
     }, 

     {
        type: 'pie',
       radius: ['25%','40%'],
        center: ['50%', '50%'],
        data: data1,
         
        label: {
                show: true,
                position: 'center'
            },
        left: '33.3333%',
        right: '33.3333%',
        top: '-44px',
//         color:'#EB657D',
        color:'#FEC241',
        bottom: 0,
        emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }, subtext:{
                  color:'#0f0',
    }
    }, 
   
    {
        type: 'pie',
        radius: ['25%','40%'],
        center: ['50%', '50%'],
        data: data2,
       label: {
                show: true,
                position:'center'
            },
        left: '66.6667%',
        right: 0,
        top: '-44px',
        color:'#FEC241',
        bottom: 0,
        emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
    },
     ]
};
return option
}
  }
  }
</script>

<style lang='less'>
.lineContainer1{
    width: 600px;
    height: 250px;
    background: #fff;
    margin-top:20px;
}
</style>